<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>咪咕视频“首页” 22001010528 王雪伊</title>
    <link rel="stylesheet" href="wang_css/index.css">
    <link rel="stylesheet" href="./wang_css/swiper-bundle.min.css">
    <script src="./wang_fonts/iconfont.js"></script>
</head>
<body>
    <body>
        <header class="wang_header">
            <nav>
                <ul class="wang_header1">
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-G"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <form action="" method="post">
                            <p>
                                <input placeholder="异形：夺命舰">
                            </p>
                        </form>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wodehongbao"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shizhong"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gengduo"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
            <nav>
                <ul class="wang_header2">
                    <li class="nav-tab"><a href="#guanzhu" class="nav-link">关注</a></li>
                    <li class="nav-tab"><a href="#jingxuan" class="nav-link">精选</a></li>
                    <li class="nav-tab"><a href="#alien" class="nav-link">异形</a></li>
                    <li class="nav-tab"><a href="./dianshiju.html" class="nav-link">电视剧</a></li>
                    <li class="nav-tab"><a href="#movie" class="nav-link">电影</a></li>
                    <li class="nav-tab"><a href="#variety" class="nav-link">综艺</a></li>
                </ul>
            </nav>
        </header>
        <nav class="wang_nav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-migushipin"></use>
                        </svg>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="./tiyu.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tiyu"></use>
                        </svg>
                        <p>体育</p>
                    </a>
                </li>
                <li>
                    <a href="./vip.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-VIP2"></use>
                        </svg>
                        <p>VIP</p>
                    </a>
                </li>
                <li>
                    <a href="./duanshipin.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yishu_duanshipin"></use>
                        </svg>
                        <p>短视频</p>
                    </a>
                </li>
                <li>
                    <a href="./wode.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode1"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>
        <footer class="wang_footer">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><img src="wang_img/第一张.jpg" ><div class="txt">中国移动领取流量</div></div>
                  <div class="swiper-slide"><img src="wang_img/第二张.png" ><div class="txt">必看高分年代剧</div></div>
                  <div class="swiper-slide"><img src="wang_img/第三张.png" ><div class="txt"><小巷>闫妮为儿女硬刚偏心公婆</div></div>
                </div>
              <script src="./wang_js/swiper-bundle.min.js"></script>
              </footer>
        <main class="wang_main">
                <div class="container">
                <!-- 第一个图标和文字 -->
                <div class="item">
                    <img src="wang_img/央视专区.png">
                    <p>央视专区</p>
                </div>
                <!-- 第二个图标和文字 -->
                <div class="item">
                    <img src="wang_img/全部赛程.png">
                    <p>全部赛程</p>
                </div>
                <!-- 第三个图标和文字 -->
                <div class="item">
                    <img src="wang_img/NBA.png">
                    <p>NBA</p>
                </div>
                <!-- 第四个图标和文字 -->
                <div class="item">
                    <img src="wang_img/CBA.png">
                    <p>CBA</p>
                </div>
                <!-- 第五个图标和文字 -->
                <div class="item">
                    <img src="wang_img/抽iPhone16.png">
                    <p>抽iPhone16</p>
                </div>
            </div>
        </main> 
            <div class="title2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chunjiedianshi"></use>
                </svg>
                <p>Top赛事聚焦</p>
                <a href="#">二台陪你一起看</a>
            </div>

</body>
<!-- json解析 -->
<ul class="wang_list"></ul>
    <script>
        const url=`http://rap2api.taobao.org/app/mock/321624/wang`
        const wang_list=document.querySelector('.wang_list');
        fetch(url)
        .then(response => response.json())
       .then(data => {
           data.forEach(item => {
               const li = document.createElement('li');
               li.innerHTML = `
                   <a href="${item.link}">
                       <img src="${item.image}" alt="${item.title}">
                       <div class="title">${item.title}</div>
                       <div class="content">${item.content}</div>
                   </a>
               `;
               wang_list.appendChild(li);
           });
       })
      .catch(error => console.error('Error fetching data:', error)); // 添加错误处理
  </script>
</body>
<!-- javascript效果 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var navTabs = document.querySelectorAll('.wang_header2 .nav-tab');

        navTabs.forEach(function(tab) {
            tab.addEventListener('click', function() {
                // 移除所有 li 上的 active-nav 类
                navTabs.forEach(function(otherTab) {
                    otherTab.classList.remove('active-nav');
                });
                // 为当前点击的 li 添加 active-nav 类
                this.classList.add('active-nav');
            });
        });
    });
</script>
<!-- JavaScript效果 -->
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },

      pagination: {
                el: ".swiper-pagination",
         clickable: true,
      },
    });
  </script>

</body>
</script>
</html>
</html>
    </script>
</html>
<!-- [
  {
    "image": "./wang_img/1.png",
    "link": "https://example.com/news1",
    "title": "郑思维官宣退出国际赛场",
    "content": "杭州总决赛成“雅思”最后一战"
  },
  {
    "image": "./wang_img/2.png",
    "link": "https://example.com/news2",
    "title": "17：35播广厦vs广东",
    "content": "国手对决!大秋激战胡明轩"
  },
  {
    "image": "./wang_img/3.png",
    "link": "https://example.com/news3",
    "title": "17：45播大跳台世界杯",
    "content": "比尔克·鲁德出战自由式预赛"
  },
  {
    "image": "./wang_img/4.png",
    "link": "https://example.com/news4",
    "title": "UFC中国澳门站纪实",
    "content": "梦回主场！中国力量闪耀银河"
  }
] -->